import React from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
interface IRoute {
  path: string;
  component: React.ComponentClass | React.FunctionComponent;
  exact?: boolean;
  children?: Array<IRoute>;
}
interface IRouterProps {
  routes: Array<IRoute>;
}
export default class VRouter extends React.Component<IRouterProps> {
  renderRoute = (routes: Array<IRoute>) => {
    return routes.map(route => {
      if(!route.children) return <Route key={route.path} path={route.path} exact={route.exact} component={route.component}></Route>
      return <Route key={route.path} path={route.path} exact={route.exact} render={() => {
        return <route.component>
          { route.children && this.renderRoute(route.children) }
        </route.component>
      }}></Route>
    })
  }
  render() {
    const { routes } = this.props;
    return <Router>
      <Switch>
        { this.renderRoute(routes) }
      </Switch>
    </Router>
  }
}